<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="top">
			<span class="teacher">设备<i class="el-icon-arrow-right"></i></span>
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card">
			<div class="card">
				<div class="topMsg">
					批次<template>
								<el-select class="class" v-model="batchId" placeholder="请选择批次" clearable>
									<el-option v-for="item in batchOptions" :key="item.value" :label="item.label" :value="item.label"></el-option>
								</el-select>
						</template>
					<!-- 状态<template>
								<el-select class="class" v-model="staticId" placeholder="请选择状态">
									<el-option v-for="item in staticOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
						</template> -->
					<el-button type="danger" class="btn" @click="search">搜索</el-button>
				</div>
				<!--表格区域-->
				<el-table ref="singleTable" :data="equipment" highlight-current-row style="width: 100%">
					<el-table-column property="number" label="设备IM号"  width="200" align="center"></el-table-column>
					<el-table-column property="batch" label="批次" width="180" align="center"></el-table-column>
					<el-table-column property="status" label="状态" width="180" align="center"></el-table-column>
					<el-table-column property="serial_number" label="座位号" width="180" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button :id="scope.row.id+a" @click="repairEquipment(scope.row.id,scope.row)" type="primary" plain size="mini">报修</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--分页功能-->
				<el-pagination
				   class="fenye"
				   @size-change="SizeChange"
				   @current-change="currentChange"
				   :current-page="page"
				   :page-sizes="pagesizes"
				   :page-size="rows"
				   layout="total, sizes, prev, pager, next, jumper"
				   :total="total">
				</el-pagination>
				<!-- 报修页面 -->
				<el-dialog class="record" title="上课记录" :visible.sync="repair">
					<el-form class="table">
						<div>
							<span class="left">设备编号</span>
							<span class="right">{{batchNum}}</span>
						</div>
						<div>
							<span class="left">类型</span>
							<template class="right">
								<el-radio v-model="radio" label="1">表带损坏</el-radio>
								<el-radio v-model="radio" label="2">表盘损坏</el-radio>
								<el-radio v-model="radio" label="3">功能异常</el-radio>
							</template>
						</div>
						<div>
							<span class="left">标题</span>
							<el-input class="input" v-model="title" placeholder="请输入内容"></el-input>
						</div>
						<div class="textarea">
							<span class="left">备注</span>
							<el-input class="area" type="textarea" v-model="reason"></el-input>
						</div>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="clock"><i class="el-icon-check">保 存</i></el-button>
					</div>
				</el-dialog>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				a:'_a',
				batchId:'',//批次id
				batchOptions:[],///存放所以的批次
				staticId:'',//状态id
				staticOptions:[],//存放状态
				rows:6,//每页几条
				page:1,//当前显示页数
				pagesizes:[6,10,15,20],//更改每页显示条数
				total:20,//一共多少条,
				equipment:[],//存放首页设备信息
				repair:false,//报修页面
				radio: '1',//单选
				title:'',//标题输入框
				batchNum:'',//报修编号
				device_id:'',//当前行id
				reason:'',//报修原因
				status:'',
			}
		},
		methods:{
			//返回上一页
			back(){
				this.$router.push({name:'teaching'})
			},
			//每页显示条数
			SizeChange(val){
				this.rows = val
				this.getDeviceInfo()
			},
			//切换第几页
			currentChange(val){
			  	this.page = val
			  	this.getDeviceInfo()
			},
			//设备查看页面
			async getDeviceInfo(){
				await this.$http.post('/api/device/deviceInfo',{
					page:this.page,
					rows:this.rows,
					batch:this.batchId
				}).then(res=>{
					this.equipment = res.data.rows
					this.total = res.data.count

				})
				this.equipment.map(item=>{
					if(item.status == '已报修'){
						$('#'+item.id+this.a).css('visibility','hidden')
					}
					this.status = item.status
				})
			},
			//批次
			getDeviceBatch(){
				this.$http.post('/api/device/deviceBatch')
					.then(res=>{
						res.data.batch.map(item=>{
							var obj = {}
							obj.label = item.batch
							obj.value = item.id
							this.batchOptions.push(obj)
						})
					})
			},
			search(){
				this.getDeviceInfo()
			},
			//报修
			repairEquipment(id,row){
				this.device_id = id
				this.repair = true
				this.batchNum = row.number
			},
			//报修提交
			clock(){
				this.$http.post('/api/device/guarantee',{
					id:this.device_id,
					reason:this.reason,
					type:this.radio,
					title:this.title
				}).then(res=>{
					if(res.data.code == 200) {
						this.$message({
							type:'success',
							message:res.data.msg
						})
						this.getDeviceInfo()
					}else if (res.data.errorCode == 400) {
						this.$message({
							type:'error',
							message:res.data.msg
						})
					}
				})
				this.repair = false
			}
		},
		created(){
			this.getDeviceInfo()
			this.getDeviceBatch()
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacher {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addteacher {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 180px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card{
		margin: 30px 50px;
		.card {
			padding: 20px;
      .topMsg {
        .class {
          padding-left: 10px;
          width: 200px;
        }
      }
		}
		.btn {
			width: 70px;
			height: 40px;
			margin-left: 30px;
		}
		.fenye {
			margin-top: 20px;
			text-align: center;
		}
		.record {
			.table{
				div {
					border-bottom: 1px solid #eee;
					.left {
						display: inline-block;
						width: 80px;
						height: 3.125rem;
						line-height: 3.125rem;
						text-align: right;
						padding-right: 10px;
					}
					.input {
						width: 200px;
						height: 30px ;
						display: inline-block;
					}
				}
				.textarea {
					border-bottom: 0;
					margin-top: 1.25rem;
					.area {
						display: inline-block;
						width: 80%;
					}
				}
			}
		}
	}
</style>
